<template>
  <div class="footer-bar">
    <ul>
      <li
        class="footer-bar-item"
        v-for="nav in navs"
        :key="nav.path"
        is="router-link"
        :to="nav.path"
        tag="li"
      >
        <div class="icon">
          <i class="iconfont" v-html="nav.meta.icon"><span></span></i>
        </div>
        <div class="title">{{ nav.meta.title }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
// 引入路由文件
import routes from '@/router/routes'

// 导出 footer 组件
export default {
  name: 'FooterBar',
  computed: {
    // 计算出在 FooterBar 上的每一项
    navs() {
      // console.log(routes)
      // routes 路由文件中定义的配置路径和元信息数组；循环渲染
      return routes.filter((route) => route.meta?.inFooter) // 验证，配置了meta 执行；infooter为true则渲染
    }
  }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont'; /* Project id 2625780 */
  src: url('//at.alicdn.com/t/font_2625780_rwvg4wh1mvh.woff2?t=1624344451207')
      format('woff2'),
    url('//at.alicdn.com/t/font_2625780_rwvg4wh1mvh.woff?t=1624344451207')
      format('woff'),
    url('//at.alicdn.com/t/font_2625780_rwvg4wh1mvh.ttf?t=1624344451207')
      format('truetype');
  font-family: 'iconfont'; /* Project id 2626983 */
  src: url('//at.alicdn.com/t/font_2626983_5u68mejemi7.woff2?t=1624608942860')
      format('woff2'),
    url('//at.alicdn.com/t/font_2626983_5u68mejemi7.woff?t=1624608942860')
      format('woff'),
    url('//at.alicdn.com/t/font_2626983_5u68mejemi7.ttf?t=1624608942860')
      format('truetype');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.footer-bar {
  width: 100%;
  background: #fff;
  ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .footer-bar-item {
      height: 90px;
      width: 16%;
      font-size: 12px;
      color: #333333;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
    }
    .footer-bar-item:hover {
      color: #ec7b67;
      font-weight: 800;
    }
  }
}
</style>
